<template>
  <div class="cls1">
    <h2>这是电影频道 - Movie</h2>
    <h3>当前id={{ $route.params.id }}</h3>
    <h3>当前query={{ $route.query }}</h3>
    <h3>当前hash={{ $route.hash }}</h3>
    <h3>当前id={{ id }}(props直接接收)</h3>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured, watch
} from 'vue'
import {useRoute} from 'vue-router'

console.log("开始第一步，组件被创建")
const route = useRoute()
console.log("name:" + route.query.name)//接收参数
const props = defineProps({
  id: {
    type: String
  }
})

watch(() => route.params.id, (toParam, previousParam) => {
  console.log(toParam, previousParam)
})

onBeforeMount(() => {
  console.log('开始第二步：准备数据');
  // 渲染组件之前，对数据进行进一步的处理
})
onMounted(() => {
  console.log('开始第三步：操作DOM');
  // 操作DOM，例如获取元素的宽度或者高度等信息
})
onBeforeUpdate(() => {
  console.log('开始第四步：备份数据');
  // 对需要更新的状态进行备份，以便进行比较和校验
})
onUpdated(() => {
  console.log('开始第五步：更新状态');
  // 根据DOM更新后的状态进行状态的更新
})
onBeforeUnmount(() => {
  console.log('开始第六步：清理定时器');
  // 清理组件中的定时器等占用内存的资源
})
onUnmounted(() => {
  console.log('开始第七步：释放内存');
  // 释放组件中占用的内存和资源
})
onActivated(() => {
  console.log('当组件被插入到 DOM 中时调用。');
  // 这个钩子在服务器端渲染期间不会被调用。
})
onDeactivated(() => {
  console.log('当组件从 DOM 中被移除时调用。');
  // 这个钩子在服务器端渲染期间不会被调用。
})
onErrorCaptured(() => {
  console.log('在捕获了后代组件传递的错误时调用。');
  // 这个钩子在服务器端渲染期间不会被调用。
})
</script>

<style scoped>
.cls1 {
  background: #dfe;
  min-height: 500px;
}

.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>